<template>
    <div class="container">

        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="问题标题">
                    <el-input v-model="queryInfo.title" clearable @clear="queryList" placeholder="请输入问题标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="toAddQuestion">新增问题</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="questionList" border style="width: 100%">
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <!-- prop里面是实体类属性名 -->
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="title" label="问题标题">
            </el-table-column>
            <el-table-column prop="content" label="问题内容">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="user.username" label="用户名字">
                <!-- <template slot-scope="scope">
                    <el-button type="primary" v-if="scope.row.userId == 1">管理员</el-button>
                    <el-button type="primary" v-if="scope.row.userId == 2">咨询师</el-button>
                    <el-button type="primary" v-if="scope.row.userId == 3">用户</el-button>
                </template> -->
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-link type="primary" @click="toEditQuestion(scope.row)">编辑问题</el-link>
                    <el-link type="primary" @click="toDeleteQuestion(scope.row.id)">删除问题</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[1, 4, 6, 8, 10]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 新增和修改的对话框 -->
        <!-- dialog中绑定close事件，实现对话框右上角叉号的取消功能 -->
        <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="cancel">
            <el-form :model="question">
                <!-- <el-form-item label="ID" label-width="80px" v-if="question.id">
                    <el-input placeholder="请输入ID" v-model="question.id"></el-input>
                </el-form-item> -->
                <el-form-item label="问题标题" label-width="80px">
                    <el-input placeholder="请输入用户名" v-model="question.title"></el-input>
                </el-form-item>
                <el-form-item label="问题内容" label-width="80px">
                    <el-input placeholder="请输入密码" v-model="question.content"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" label-width="80px">
                    <!-- <el-input placeholder="请输入昵称" v-model="question.createTime"></el-input> -->
                    <el-date-picker v-model="question.createTime" align="right" type="date" placeholder="选择日期"
                        format="yyyy-MM-dd hh:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="用户ID" label-width="80px">
                    <!-- <el-input placeholder="请输入用户ID" v-model="question.userId"></el-input> -->
                    <el-select v-model="question.userId" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addQuestion">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>

export default {
    data() {
        return {
            // options: [{
            //     value: 1,
            //     label: '管理员'
            // }, {
            //     value: 2,
            //     label: '咨询师'
            // }, {
            //     value: 3,
            //     label: '用户'
            // }],
            options: [],

            dialogVisible: false, // 预览图片的对话框
            // 查询信息对象
            queryInfo: {
                title: '',
                pageNum: 1,
                pageSize: 4
            },
            total: 0,
            questionList: [],
            title: '添加', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            question: {
                // 文章对象
                id: "",
                title: "",
                content: "",
                createTime: "",
                userId: "",
            },
            fileList: [],
        }
    },
    methods: {
        // 添加文章
        addQuestion() {
            if (this.question.id) { // 有值为true  修改
                // .........后面实现..............
                this.$http.post("question/update", this.question)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.question = {
                                id: "",
                                title: "",
                                content: "",
                                createTime: "",
                                userId: "",
                            }
                            this.fileList = []
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            } else {
                this.$http.post("question/insert", this.question)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.question = {
                                id: "",
                                title: "",
                                content: "",
                                createTime: "",
                                userId: "",
                            }
                            this.fileList = []
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
        },
        // 删除文章
        toDeleteQuestion(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('question/delete/' + id)
                        .then(resp => {
                            if (resp.data.status == 200) {
                                this.$message.success(resp.data.message)
                                this.queryList()
                            } else {
                                this.$message.error(resp.data.message)
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 进入修改的预览数据页面
        toEditQuestion(row) {
            this.queryListUser()

            //console.log(row)
            // 赋值
            this.question = row;
            // 设置标题
            this.title = "修改公告";
            // 开启对话框
            this.dialogFormVisible = true;

        },
        /// 取消对话框
        cancel() {
            // this.queryList();
            this.dialogFormVisible = false;
            this.question = {
                id: "",
                title: "",
                content: "",
                createTime: "",
                userId: "",
            }

            this.fileList = []
        },
        search() {
            this.queryInfo.pageNum = 1;
            this.queryList();
        },

        //查找用户列表
        queryListUser() {
            console.log(this.queryInfo);
            // 调用后端接口来获取数据
            this.$http.get('user', {
                params: {
                    pageSize: 99999
                }
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        console.log(resp.data)
                        this.options = resp.data.data.list;
                        // this.total = resp.data.data.total;
                        console.log(this.options)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        },

        // 进入添加的对话框
        toAddQuestion() {
            this.title = "新增公告";
            this.dialogFormVisible = true;
        },
        handleSizeChange(size) {
            this.queryInfo.pageSize = size;
            console.log("size" + size)

            this.queryList();
        },
        handleCurrentChange(num) {
            this.queryInfo.pageNum = num;
            console.log('num:' + num)

            this.queryList();
        },
        // 分页查询信息的方法
        queryList() {
            console.log(this.queryInfo);
            // 调用后端接口来获取数据
            this.$http.get('question/findByPage', {
                params: this.queryInfo
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        console.log(resp.data)
                        this.questionList = resp.data.data.list;
                        this.total = resp.data.data.total;
                        console.log(this.questionList)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        }
    },
    mounted() {
        this.queryList();
        this.queryListUser()
    }
}
</script>
<style>
/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
    min-height: 200px;
}

.el-breadcrumb {
    margin-bottom: 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #ddd;
}

.el-pagination {
    margin-top: 15px;
}

.el-link {
    padding: 0 5px;
}
</style>